<template>
  <Modal v-model="modal" title="导入订单调整" :closable="false" :mask-closable="false" :width='400'>
    <template v-slot:footer>
      <div class="">
        <div style="flex: 1;" />
        <Button @click='onCancel'>取消</Button>
        <Button :loading='loading' type="primary" @click='onImport'>导入调整</Button>
      </div>
    </template>

    <div class="commission">
      <div class="">
        第一步
      </div>
      <div class="">
        请按照数据模板的格式准备导入需调整的订单
      </div>
      <Button style="color: #0066CC;" type='text' @click="onDownload"
        icon="ios-cloud-download-outline">
        下载订单修改模板
      </Button>
      <div style="margin-top: 10px;">
        第二步
      </div>
      <div class="">
        请填写好订单调整相关内容
      </div>
      <div style="margin-top: 10px;">
        第三步
      </div>
      <div class="">
        请上传已填写的“订单调整模板”
      </div>
      <div class="file" style="margin-top: 10px;">
        <div v-if="option">
          <dt-info-edit ref='upload' :option='option'></dt-info-edit>
          <span v-if="tmpFile">{{tmpFile.name}}</span>
        </div>
        <Button v-if="errFile" type='text' style="color: red;" @click="onErrFile">
          {{errFile.accessoryName}}
        </Button>
      </div>
    </div>
  </Modal>

</template>

<script>
  import toolMgr from '@/biz/base/tool.js'
  import adjustMgr from '@/biz/sales/adjustOrder'
  export default {
    data() {
      return {
        loading: false,
        tmpFile: null,
        errFile: null,
        modal: false,
        info: {},
        option: null
      }
    },
    mounted() {},
    methods: {
      show(info) {
        this.loading = false
        this.tmpFile = null
        this.errFile = null
        // this.info = info
        this.modal = true
        this.option = {
          upload: {
            title: '上传文件',
            api: adjustMgr.importAdjustDetail(this.$route.query.adjustmentId),
            show: false,
            format: ['xlsx', 'xls', 'XLS', 'XLSX'],
            formatErr: () => {
              this.loading = false
              this.$Message.error('只支持上传Excel表格！')
            },
            before: (file) => {
              this.tmpFile = file
              return false
            },
          },
          change: (data) => {
            this.loading = false
            let res = data.editValue[data.editValue.length - 1].response
            if (res.code == 200) {
              if (res.data && res.data.accessoryUrl) {
                this.errFile = res.data
                this.$Message.error('请根据异常信息中提示的问题进行修改后，重新提交')
              } else {
                this.$emit('onSearch')
                this.modal = false
              }
            }
          }
        }
      },
      onCancel() {
        this.modal = false
      },
      onImport() {
        if (this.tmpFile) {
          this.loading = true
          this.$refs.upload.post(this.tmpFile)
        } else {
          this.$Message.warning('请上传已填写的“订单修改模版”')
        }
      },
      onDownload() {
        adjustMgr.downLoadTemplateFun({
          fileName: '订单修改模板.xls',
          adjustId: this.$route.query.adjustmentId,
          isImport: true
        })
      },
      onErrFile() {
        toolMgr.downloadFile(this.errFile.accessoryUrl, this.errFile.accessoryName + '.xls')
      }
    },
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;
  }

  .file {
    display: flex;
    justify-content: space-between;
  }
</style>